<template>
  <view class="warp">
    <view class="card">
      <view class="item flex">
        <view class="name">收货人:</view>
        <input
          v-model="item.receiveName"
          type="text"
          class="ipt"
          placeholder="请使用真实姓名"
        />
      </view>
      <view class="item flex">
        <view class="name">联系方式:</view>
        <input
          v-model="item.receivePhone"
          type="text"
          class="ipt"
          placeholder="请输入手机号"
        />
      </view>
      <view class="item flex">
        <view class="name">所在地区:</view>
        <view class="ipt">
          <view class="show_addr" @click="clickShowPicker">
            {{ item.receiveArea || "点击选择" }}
          </view>
          <u-picker
            mode="region"
            v-model="showPicker"
            :safe-area-inset-bottom="true"
            :area-code="areaCode"
            @confirm="confirmPicker"
          ></u-picker>
        </view>

        <view class="iconfont icon-angle-right"></view>
      </view>
      <view class="item fl">
        <view class="name">详细地址:</view>
        <textarea v-model="item.receiveAddress" class="detail_addr" />
      </view>
    </view>

    <view class="btn_warp">
      <view class="btn flex_c" @click="submit">保存</view>
    </view>
  </view>
</template>

<script>
import { setNavigationBarTitle } from "@/utils/setting";
import { saveOrUpdate } from "@/api/common";
export default {
  data() {
    return {
      id: -1,
      showPicker: false,
      item: {},
      areaCode: [],
    };
  },
  onLoad(options) {
    // #ifdef APP-NVUE
    const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
    // #endif
    // #ifndef APP-NVUE
    const eventChannel = this.getOpenerEventChannel();
    // #endif
    eventChannel.on("acceptDataFromOpenerPage", (data) => {
      console.log(data);
      const { item, title } = data.data;
      setNavigationBarTitle(title);
      const i = JSON.parse(item);
      console.log(i);
      if (i.id) {
        this.item = i;
      }
    });
  },
  methods: {
    submit() {
      const { item } = this;
      if (!item.boolDefault) {
        item.boolDefault = 0;
      }
      saveOrUpdate(item).then((res) => {
        this.$ShowToast({
          title: "保存成功",
        });
        // #ifdef APP-NVUE
        const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
        // #endif
        // #ifndef APP-NVUE
        const eventChannel = this.getOpenerEventChannel();
        // #endif
        eventChannel.emit("someEvent");

        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          });
        });
      });
    },
    clickShowPicker() {
      this.showPicker = true;
    },
    confirmPicker(e) {
      let receiveArea = [];
      let areaCode = [];
      Object.keys(e).forEach((v) => {
        receiveArea.push(e[v].label);
        areaCode.push(e[v].value);
      });
      console.log(receiveArea, areaCode);
      this.item.receiveArea = receiveArea.join("");
      this.areaCode = areaCode;
    },
  },
};
</script>

<style lang="scss" scoped>
.warp {
  padding: 30upx;
  .card {
    width: 100%;
    padding: 30upx 20upx;
    background-color: #fff;
    border-radius: 20upx;
    .item {
      padding: 20upx 0;
      border-bottom: 2upx solid #ccc;
      .name {
        font-size: 28upx;
        font-weight: 600;
        flex-shrink: 0;
      }
      .ipt {
        flex: 1;
        margin-left: 15upx;
      }
      .iconfont {
        flex-shrink: 0;
      }
      .detail_addr {
        height: 80upx;
        line-height: 40upx;
        margin-left: 15upx;
      }
    }
  }

  .btn_warp {
    width: 100%;
    height: 120upx;
    position: fixed;
    left: 0;
    bottom: 40upx;
    padding: 20upx 30upx;
    .btn {
      width: 100%;
      height: 100%;
      background-color: #0081cf;
      color: #fff;
      font-size: 32upx;
      font-weight: 600;
      border-radius: 20upx;
    }
  }
}
</style>
